<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
  <th:block th:include="pc/include :: header('上传文档')" />
</head>
<body>
<th:block th:include="pc/include :: top" />
<div class="iw">
  <div class="crumbs">
    <p>当前位置：
      <a href="/static">首页</a> > 上传文档</p>
  </div>
  <div class="upload_step">
    <ul>
      <li class="active" id="li1">
        <span class="fl">01</span>
        <p class="fl">选择文档</p>
      </li>
      <li id="li2">
        <span class="fl">02</span>
        <p class="fl">完善信息</p>
      </li>
      <li id="li3">
        <span class="fa fa-check fl"></span>
        <p class="fl">完成上传</p>
      </li>
    </ul>
    <div class="upload_step_hd"></div>
  </div>
  <div class="upload_stepone">
    <div class="upload_center">
      <div class="progress-bar"></div>
      <div id="picker">选择文件</div>

    </div>
    <p>选择要上传的文档：按住CTRL可以上传多份文档，支持拖拽</p>
  </div>
  <div class="upload_steptwo">
    <div class="steptwo_h1">
      <h3 class="fl">请补充文档信息，完成上传</h3>
      <a id="upload_go1" href="javascript:void(0);"><i class="fa fa-plus-square"></i>继续添加</a>
      <i id="upload_pi" class="checkbox unselect">批量设置</i>
    </div>
    <div class="doclist"></div>
    <div class="steptwo_h2">
      <a id="upload_go3" href="javascript:void(0);"><i class="fa fa-upload"></i>完成上传</a>
      <a id="upload_goc" href="javascript:void(0);"><i class="fa fa-suitcase"></i>生成专题</a>
    </div>
  </div>
  <div class="upload_stepthr">
    <div class="p1"><i class="fa fa-check-circle-o"></i>文档已上传成功</div>
    <div class="p2">您可以<a href="uploaddoc">继续上传文档</a></div>
    <div class="p3">或<a th:href="@{/user/center}">进入用户中心</a></div>
  </div>
  <div class="upload_stepfour">
    <div class="p1"><i class="fa fa-check-circle-o"></i>生成专题中，请稍后</div>
  </div>
  <!--<img width="100%" height="100%" src="http://www.ds32.com/data/doc/202403/05/17096288774100/4.png" /> -->
  <div class="upload_info">
    <h3>温馨提示</h3>
    <p>1.您所在的用户组，上传大小。</p>
    <P>2.您所在的用户组，支持上传的格式有:【doc,docx,ppt,pptx,xls,xlsx,csv,epub,vsd,pot,pps,rtf,wps,et,dps,pdf,txt,zip】</P>
    <p>3.支持批量上传和拖拽上传，可批量设置分类，免费阅读页数，阅读币，下载币等信息。</p>
    <p>4.支持<span style="color:#f00">zip压缩包</span>上传，压缩包可以包含多份任意类型的文件，部分类型的文件可能不支持在线预览。</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;压缩包上传后，会被自动解压后分析压缩包里面的文件内容和格式，并忽略掉您所在的用户组不支持上传的格式。</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;如果压缩包里的文件具有一定的相关性，建议一键生成专题。</p>
    <p>5.目前支持以下类型预览：</p>
    <ul>
      <li><i class="doc"></i>doc,docx</li>
      <li><i class="ppt"></i>ppt,pptx</li>
      <li><i class="xls"></i>xls,xlsx</li>
      <li><i class="wps"></i>wps</li>
      <li><i class="et"></i>et</li>
      <li><i class="dps"></i>dps</li>
      <li><i class="vsd"></i>vsd</li>
      <li><i class="pot"></i>pot</li>
      <li><i class="pps"></i>pps</li>
      <li><i class="epub"></i>epub</li>
      <li><i class="pdf"></i>pdf</li>
      <li><i class="rtf"></i>rtf</li>
      <li><i class="txt"></i>txt</li>
    </ul>
    <p>6.上传涉及侵权内容的资料我们有权利在不通知用户的情况下进行删除</p>
    <p>7.上传有问题需要帮助?可以 <a href="tencent://message/?uin=<?php echo $site->qq ?>&Site=<?php echo $site->host ?>&Menu=yes">联系客服</a></p>
  </div>
</div>
<th:block th:include="pc/include :: footer" />
<script th:src="@{/js/webuploader.js}"></script>
<script th:src="@{/js/ui-select.js}"></script>
<script>
  var topic_title = '';
  var topic_ids = '';
  var type_json =eval('([(${json})])');
  $(function () {
    var uploader = WebUploader.create({
      swf: '/js/Uploader.swf',
      server: '/common/upload',
      pick: '#picker',
      dnd: '.upload_stepone',
      accept: {
        title: '文档',
        extensions: 'doc,docx,ppt,pptx,xls,xlsx,csv,epub,vsd,pot,pps,rtf,wps,et,dps,pdf,txt,zip,ofd',
        mimeTypes: ''
      },
      fileNumLimit: Number('0'), //0 不限制 -1：不能上传
      fileSingleSizeLimit: Number('0') * 1024 * 1024, //0 不限制 -1：不能上传
      compress: null,
      thumb: null,
      chunked: false,
      chunkSize: "100000000",
      duplicate: true,
      resize: false,
    });

    uploader.on("error", function (type) {
      if (type == "Q_TYPE_DENIED") {
        Message("请上传符合文件格式的文件");
      } else if (type == "Q_EXCEED_NUM_LIMIT") {
        Message("今天您上传文档的数量已超过您所在用户组上传的最大数量，请明天再来上传。");
      } else if (type == "Q_EXCEED_SIZE_LIMIT") {
        Message("您所在用户组最大只能上传 -1M 文档。");
      } else if (type == "F_EXCEED_SIZE") {
        Message("您所在用户组最大只能上传 -1M 文档。");
      } else {
        Message("上传出错！请检查后重新上传！错误代码" + type);
      }
    });

    uploader.on('fileQueued', function (file) {

              uploader.upload(file);

    });

    uploader.on('uploadBeforeSend', function (obj, data, headers) {
      data.md5 = obj.file.md5;
      data.title = obj.file.name.substr(0, obj.file.name.lastIndexOf("."));
      data.draftid = "0";
      topic_title = data.title;
    });

    uploader.on('uploadProgress', function (file, percent) {
      $(".upload_center .progress-bar").css('width', percent * 100 + '%');
      $(".upload_center .webuploader-pick").text('上传中(' + parseInt(percent * 100) + '%' + ")");
    });

    uploader.on('uploadError', function (file, reason) {
      Message("文件[" + file.name + "]上传失败，原因：" + reason);
    });

    var i = 0;
    uploader.on('uploadSuccess', function (file, docs) {
      //console.log(docs+"333333333"+docs.code);
      if(docs.code==401) {
        Message(docs.msg,docs.msg,function name()
        {window.location.href="/login";});

      }
      docs = docs.data;
      if (docs.length > 0) {
        for (var k = 0; k < docs.length; k++) {
          var div = '';
          var doc = docs[k];
          if (doc.docid == -1) {
            div = '<div class="steptwo_div" id="panel_' + ++i + '">' +
                    '<div class="steptwo_title">' +
                    '    <p class="fl tit" style="display: block;">标题：<i class="' + doc.exten + '"></i><span>' + doc.title + '</span></p>' +
                    '    <a class="fr del"><i class="fa fa-trash-o fa-lg"></i></a>' +
                    '    <a class="fr color-tip">您所在的用户组不支持上传 ."' + doc.exten + '" 格式的文件</a>' +
                    '    <span class="fr tip"></span>' +
                    '    <div class="index">' + i + '</div>' +
                    '</div>' +
                    '</div>';
          } else if (doc.docid == -2) {
            div = '<div class="steptwo_div" id="panel_' + ++i + '">' +
                    '<div class="steptwo_title" >' +
                    '    <p class="fl tit" style="display: block;">标题：<i class="' + doc.exten + '"></i><span>' + doc.title + '</span></p>' +
                    '    <a class="fr del"><i class="fa fa-trash-o fa-lg"></i></a>' +
                    '    <a class="fr color-tip">已存在内容相同的文件，禁止上传</a>' +
                    '    <span class="fr tip"></span>' +
                    '    <div class="index">' + i + '</div>' +
                    '</div>' +
                    '</div>';
          } else {
            div = '<div class="steptwo_div" id="panel_' + ++i + '">' +
                    '<div class="steptwo_title">' +
                    '    <p class="fl tit">标题：<i class="' + doc.exten + '"></i><span>' + doc.title + '</span></p>' +
                    '    <a class="fr del"><i class="fa fa-trash-o fa-lg"></i></a>' +
                    '    <a class="fr updown">收起</a>' +
                    '    <span class="fr tip"></span>' +
                    '    <div class="index">' + i + '</div>' +
                    '</div>' +
                    '<div class="steptwo_body">' +
                    '    <form>' +
                    '        <input name="docid" type="hidden" value="' + doc.docid + '">' +
                    '        <input name="draftid" type="hidden" value="' + doc.draftid + '">' +
                    '        <div class="up-l">' +
                    '            <div class="doc_title">' +
                    '                <label><i>*</i>标题：</label>' +
                    '                <input name="title" type="text" class="' + doc.exten + '" value="' + doc.title + '" data-valid data-must="#" />' +
                    '                <span>&nbsp;</span>' +
                    '            </div>' +
                    '            <div class="doc_keywd">' +
                    '                <label>关键字：</label>' +
                    '                <input name="keyword" type="text" value="' + doc.keyword + '" />' +
                    '                <span>&nbsp;</span>' +
                    '            </div>' +
                    '            <div class="doc_short">' +
                    '                <label>简介：</label>' +
                    '                <i class="checkbox checked">自动获取文档前<span style="color:#f60">100</span>个字为简介</i>' +
                    '                <textarea name="word" disabled="disabled">' + doc.word + '</textarea> ' +
                    '                <span>&nbsp;</span>' +
                    '            </div>' +
                    '            <div class="doc_readpay">' +
                    '                <label><i>*</i>阅读售价：</label>' +
                    '                <input name="readpay" type="number" value="' + doc.readpay + '" data-valid data-must="#" />' +
                    '                <i>元</i>' +
                    '            </div>' +
                    '            <div class="doc_preview"' + (doc.readpay == 0 ? ' style="display: none;"':'') + '>' +
                    '                <label>可免费预览：</label>' +
                    '                <input name="preview" type="number" value="' + doc.preview + '" data-valid data-must="#" />' +
                    '                <i>页</i>' +
                    '            </div>' +
                    '            <div class="doc_downpay">' +
                    '                <label><i>*</i>下载售价：</label>' +
                    '                <input name="downpay" type="number" value="' + doc.downpay + '" data-valid data-must="#" />' +
                    '                <i>元</i>' +
                    '            </div>' +
                    '            <div class="doc_isdown">' +
                    '                <label></label>' +
                    '                <i class="checkbox">禁止下载</i>' +
                    '            </div>' +
                    '        </div>' +
                    '        <div class="up-r">' +
                    '            <div class="doc_type">' +
                    '                <label><i>*</i>分类：</label>' +
                    '                <div style="display:inline"></div>' +
                    '                <span>&nbsp;</span>' +
                    '            </div>' +
                    '            <div class="doc_filter"></div>' +
                    '            <a class="btn_upload"><i class="fa fa-save"></i>单个保存</a>' +
                    '        </div>' +
                    '    </form>' +
                    '</div>' +
                    '</div>';
            topic_ids += doc.docid + ',';
          }
          $(".upload_steptwo .doclist").append(div);
          $("#panel_" + i + " .doc_type div").ui_select(type_json, 'typeid', doc.typeid);
        }
      } else {
        Message("文件" + file.name + " 上传失败，原因：" + docs.code);
      }
    });

    uploader.on('uploadFinished', function () {
      $(".upload_step_hd").css("left", "520px");
      $(".upload_step li").removeClass("active");
      $("#li2").addClass('active');
      $(".upload_stepone").hide();
      $(".upload_steptwo").show();

      $(".upload_center .progress-bar").css('width', '0%');
      $(".upload_center .webuploader-pick").text('选择文件');
    });

    $("#upload_go1").click(function () {
      $(".upload_step_hd").css("left", "245px");
      $(".upload_step li").removeClass("active");
      $("#li1").addClass('active');
      $(".upload_stepone").show();
      $(".upload_steptwo").hide();

    });

    $("#upload_go3").click(function () {
      var isok = false;
      $(".upload_steptwo .steptwo_body form").each(function () {
        isok = save($(this));
      });
      if (isok) {
        $(".upload_step_hd").css("left", "795px");
        $(".upload_step li").removeClass("active");
        $("#li3").addClass('active');
        $(".upload_steptwo").hide();
        $(".upload_stepthr").show();
      }
    });

    $("#upload_goc").click(function () {
      var isok = false;
      $(".upload_steptwo .steptwo_body form").each(function () {
        isok = save($(this));
      });
      if (isok) {
        $(".upload_step_hd").css("left", "795px");
        $(".upload_step li").removeClass("active");
        $("#li3").addClass('active');
        $(".upload_steptwo").hide();
        $(".upload_stepfour").show();

        $.get("/fenci/" + topic_title, function (keyword) {
          $.post("/pub.html",
                  {
                    "title": topic_title,
                    "word": topic_title,
                    "keyword": keyword,
                    "typeid": -1,
                    "downpay": "",
                    "discount": "",
                    "docs": topic_ids,
                  },
                  function (data) {
                    location.href = "/pub.html?topicid="+data;
                  });
        });
      }
    });

    function panel_show($panel, show) {
      if (show) {
        $panel.find(".updown").text("收起");
        $panel.find(".steptwo_body").slideDown("slow");
        $panel.find(".tit").fadeOut();
      } else {
        $panel.find(".updown").text("展开");
        $panel.find(".steptwo_body").slideUp("slow");
        $panel.find(".tit").fadeIn();
      }
    }

    var pi = false;
    $("#upload_pi").click(function () {
      if (pi = !pi) {
        $("#panel_1 .btn_upload").html('<i class="fa fa-save"></i>批量保存');
        $("#panel_1 .btn_upload").addClass("pi");
        panel_show($("#panel_1"), 1);
        panel_show($(".steptwo_div[id!='panel_1']"), 0);
      } else {
        $("#panel_1 .btn_upload").html('<i class="fa fa-save"></i>单个保存');
        $("#panel_1 .btn_upload").removeClass("pi");
        panel_show($(".steptwo_div"), 1);
      }
    });

    $(".upload_steptwo").on("click", ".steptwo_div .updown", function () {
      $panel = $(this).parent().parent();
      if ($panel.find(".updown").text() == '展开') {
        panel_show($panel, 1);
      } else {
        panel_show($panel, 0);
      }
    });

    $(".upload_steptwo").on("click", ".steptwo_div .fa-trash-o", function () {
      $steptwo_div = $(this).parent().parent().parent();
      $steptwo_div.fadeTo(1000, 0, function () {
        $steptwo_div.remove();
      });
    });

    $(".upload_steptwo").on("click", ".doc_short > .checkbox", function () {
      if ($(this).hasClass("checked")) {
        $(this).next().removeAttr("disabled");
      } else {
        $(this).next().attr("disabled", "disabled");
      }
    });

    $(".upload_steptwo").on("change", ".doc_readpay input", function () {
      if ($(this).val() <= 0) {
        $(this).val(0);
        $(this).parent().next().hide();
      } else {
        $(this).parent().next().show();
      }
    });

    $(".upload_steptwo").on("change", ".doc_preview input", function () {
      if ($(this).val() <= 0) {
        $(this).val(0);
      }
    });

    $(".upload_steptwo").on("change", ".doc_downpay input", function () {
      if ($(this).val() <= 0) {
        $(this).val(0);
      }
    });

    $(".upload_steptwo").on("click", ".doc_isdown > .checkbox", function () {
      if ($(this).hasClass("checked")) {
        $(this).parent().prev().find("input").removeAttr("disabled");
      } else {
        $(this).parent().prev().find('input').val(-1).attr("disabled", "disabled");
      }
    });

    $(".upload_steptwo").on("click", ".btn_upload", function () {
      var $form = $(this).parent().parent();
      if (save($form) && pi) {
        var readpay = $form.find("input[name='readpay']").val();
        var preview = $form.find("input[name='preview']").val();
        var downpay = $form.find("input[name='downpay']").val();
        var type = $form.find(".doc_type").html();
        var filter = $form.find(".doc_filter").html();
        $(".steptwo_div[id!='panel_1'] form").each(function () {
          $this = $(this);
          $this.find("input[name='readpay']").val(readpay);
          $this.find("input[name='preview']").val(preview);
          $this.find("input[name='downpay']").val(downpay);
          $this.find(".doc_type").html(type);
          $this.find(".doc_filter").html(filter);
          save($this);
        });
      }
    });

    function save($form) {
      var $form_title = $form.find("input[name='title']");
      var $form_type = $form.find(".doc_type input");
      var $form_filter = $form.find("input[name='filter[]']");

      if ($form_title.val() == '') {
        $form_title.addClass('error');
        Message('请输入文档标题');
        return false;
      } else {
        $form_title.removeClass('error');
      }
      if ($form_type.val() == '' || $form_type.val()=='null') {
        $form_type.addClass('error');
        Message('请选择文档分类');
        return false;
      } else {
        $form_type.removeClass('error');
      }
      console.log($form_type.val()+'dddd'+$form.find(".doc_type .ui-select span").children().length);
      if ($form_type.val().split('-').length < $form.find(".doc_type .ui-select span").children().length) {
        $form_type.addClass('error');
        Message('文档分类需要选到最后一级');
        return false;
      } else {
        $form_type.removeClass('error');
      }

      var fno = false;
      $form_filter.each(function () {
        if ($(this).val() <= 0) {
          fno = true;
          return;
        }
      });

      if (fno) {
        $form_type.addClass('error');
        Message('请设置附加分类');
        return false
      } else {
        $form_type.removeClass('error');
      }

      panel_show($form.parent().parent(), 0);
      $.post("/upload/save", $form.serialize(), function (data) {
        if (data) {
          $form.parent().prev().find('.del').html(
                  '<i class="fa fa-check-circle fa-lg" style="color:#ff6802;width:28px" aria-hidden="true"></i>'
          );
          $form.parent().prev().find('.tip').text(data);
        } else {
          Message("保存失败");
        }
      });
      return true;
    }
  });
</script>